<template>
<div>
  <div style="text-align: center;margin-top: 30px">
    <el-image
      style="width: 200px; height: 200px"
      src="/static/移动购物.png"
      :fit="fit"></el-image>
  </div>
  <van-search size="xx-large" v-model="user.username" shape="round"  placeholder="请输入用户名" :left-icon="customIcon"/>
  <van-search size="xx-large" v-model="user.nickName" shape="round"  placeholder="请输入昵称" :left-icon="customIcon"/>
  <van-search size="xx-large" v-model="user.password" shape="round"  type="password" placeholder="请输入密码" :left-icon="customIcon2"/>
  <van-search size="xx-large" v-model="user.email" shape="round"  placeholder="请输入邮箱" :left-icon="customIcon4"/>
  <div class="search-container">
    <van-search
      size="xx-large"
      v-model="user.codeemail"
      shape="round"
      placeholder="请输入验证码"
      :left-icon="customIcon3"
      ref="search"
    />
          <button class="search-button" @click="sendVerificationCode">
            {{btntxt1}}
          </button>
  </div>
  <div style="padding: 10px">
    <van-button style="height: 60px;font-size: 18px;width: 100%;" round type="info" @click="register1">注册</van-button></div>
  <div style="text-align: center;cursor: pointer" @click="turnto">已有账号，去登录！</div>
</div>
</template>

<script>
import Vue from 'vue';
import {Form, Toast} from 'vant';
import { Field } from 'vant';
import { Button } from 'vant';
import request from "../../utils/request";
import { Search } from 'vant';
import { Cell } from 'vant';

Vue.use(Cell);
Vue.use(Search);
Vue.use(Button);
Vue.use(Form);
Vue.use(Field);
export default {
  data(){
    return{
      time1:60,
      fit:'cover',
      customIcon: 'manager',
      customIcon2: 'lock',
      customIcon3: 'more',
      customIcon4:'card',
      user:{},
      btntxt1:'发送验证码'
    }
  },
  methods:{
    turnto(){
      this.$router.push('/applogin')
    },
    //发送邮箱验证码
    sendVerificationCode(){
      if (this.btntxt1!='发送验证码'){
        return
      }else {
      request.post('/sendCode',this.user).then(resp=>{
        if (resp.code===0){
          this.Toast(resp.errorMessage,'success')
        }else {
          this.Toast(resp.errorMessage,'error')
        }
      })
      }
      this.time1=60;
      this.timer1()
    },
    //邮箱验证码倒计时
    timer1() {
      if (this.time1 > 0) {
        this.disabled1=true;
        this.time1--;
        this.btntxt1=this.time1+"秒";
        setTimeout(this.timer1, 1000);
      } else{
        this.time1=0;
        this.btntxt1="发送验证码";
        this.disabled1=false;
      }

    },
    //注册
    register1(){
      let url='/register'
      if (!this.user.password||!this.user.username||!this.user.email||!this.user.nickName){
        Toast.fail('请填写完整')
        return
      }else {
        request.post(url, this.user).then(resp => {
          if (resp.code === 200) {
            this.user={}
            this.message(resp.errorMessage, 'success')
          } else {
            this.message(resp.errorMessage, 'error')
          }
        })
      }

    },
  }
}
</script>

<style scoped>
>>> .van-cell{
  font-size: 16px;
  line-height: 50px;
}
.search-container {
  position: relative;
}
.search-button {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translate(0, -50%);
  background-color: red;
  color: #fff;
  border: none;
  border-radius: 10px 25px 25px 10px;
  padding: 8px 12px;
  height: 54px;
  font-size: 16px;
  cursor: pointer;
}
</style>
